<template>
  <div>
    <div v-for="(item,index) in specialList" :key="index" class="special-box">
      <router-link  class="special-list" :to="{name:'specialDetail',query:{specialId:item.id}}">
        <div  class="big-img" v-if="!title" :style="'backgroundImage: url('+(item.mxImageUrl.substr(0,4).toLowerCase() == 'http' ? item.mxImageUrl : resUrl+item.mxImageUrl)+')'"></div>
        <h3>{{item.name}}</h3>
        <div class="special-time-box">

          <div class="special-time" v-if="item.status==release&&item.startTime<item.timestamp&&item.timestamp<item.endTime">
            距结拍
            <count-down :endTime="item.endTime" :timestamp="item.timestamp" endText="已经结束了"></count-down>
          </div>
          <div class="special-time" v-else-if="item.status==release&&item.startTime>item.timestamp">
            距开拍
            <count-down :endTime="item.startTime" :timestamp="item.timestamp" endText="已经开始了"></count-down>
          </div>
          <div class="special-time" v-else>
            已结束
          </div>

          <div class="special-look">
            <div>
              <img src="../../../../static/images/productNum.png" alt="">
              <span>{{item.productNum}}</span>
            </div>
            <div>
              <img src="../../../../static/images/viewNum.png" alt="">
              <span>{{item.followersNum}}</span>
            </div>

          </div>
        </div>
        <div class="big-img" v-if="title" :style="'backgroundImage: url('+(item.mxImageUrl.substr(0,4).toLowerCase() == 'http' ? item.mxImageUrl : resUrl+item.mxImageUrl)+')'">

          <span class="tag" v-if="item.status==release&&item.startTime<item.timestamp&&item.timestamp<item.endTime">竞拍中</span>
          <span class="tag" style="background-color: #FFA600" v-else-if="item.status==release&&item.startTime>item.timestamp">预展中</span>
          <span class="tag" style="background-color: rgba(0,0,0,0.6);" v-else-if="item.status==release">已结束</span>

        </div>

        <!--专场列表展示产品-->
        <div class="img-box" v-if="title">
          <router-link  v-for="pro in item.products" :key="pro.id" :to="{name:'lotDetail',query:{lotId:pro.id,shopId:pro.shopId}}"
                        :style="'backgroundImage: url('+(pro.smImageUrl.substr(0,4).toLowerCase() == 'http' ? pro.smImageUrl : resUrl+pro.smImageUrl)+')'"
          >
            <!--<img :src="pro.smImageUrl.substr(0,4).toLowerCase() == 'http' ? pro.smImageUrl : resUrl+pro.smImageUrl" alt="">-->
          </router-link>
        </div>
      </router-link>
    </div>

  </div>
</template>

<script>
  import {ipconfig} from '../../../assets/js/ipconfig';
  export default {
    name: "specialList",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
      }
    },
    props:["specialList","title","release"],
    created(){

    }

  }
</script>

<style scoped>
  .special-box{
    background-color: #F2F2F2;
    padding-bottom: 0.5rem;
  }
  .special-list{
    display: block;
    padding: 0rem 0.5rem;
    padding-top: 0.5rem;
    background-color: #ffffff;
  }
  .special-box:first-child .special-list{
    padding-top: 0;
  }
  .special-box:last-child{
    padding-bottom: 0;
  }
  .special-list a{
    display: block;
  }
  .big-img{
    margin-bottom: 0.55rem;
    height: 10rem;
    background-origin: content-box;
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.2);
    position: relative;
  }
  /*.special-list img{*/
    /*width: 100%;*/
  /*}*/
  .special-list h3{
    font-size: 0.9rem;
    color: #282828;
    font-weight: bold;
    height: 0.95rem;
    line-height: 0.95rem;
  }
  .special-time-box{
    display: flex;
    justify-content: space-between;
    color: #999999;
    height: 1.5rem;
    line-height: 1.5rem;
  }
  .special-time,.special-look div{
    font-size: 0.5rem;
  }
  .special-look, .special-look div {
    display: flex;
    justify-content: space-between;
  }
  .special-look img{
    width: 16px;
    height: 16px;
  }
  .special-look div{
    align-items: center;
  }
  .special-look div:first-child{
    margin-right: 0.75rem;
  }
  .img-box{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: auto;
  }
  .img-box>a{
    flex-shrink: 0;
    width: 90px;
    margin-right: 0.3rem;
    display: block;
    height: 90px;
    background-origin: content-box;                /*从content区域开始显示背景*/
    background-position:50% 50%;              /*图片上下左右居中*/
    background-size:contain;                  /*保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应定义背景的区域*/
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.1);
  }
</style>
